<template>
  <div class="lon-wrap">
    
    <czHeader></czHeader>
    <!-- 主体 -->
    <div class="lon-dashboard">
      <div class="logo-wrap">
        <div>
          <img src="./../../static/images/logo.jpg" alt="" />
        </div>
        <p class="row name-wrap">
          <span class="title">LON</span>
          <span class="divider">|</span>
          <span class="subtitle">Tokenlon Utility Token</span>
        </p>
        <div class="clock">
          <img src="./../../static/images/clock.svg" alt="" />
          <span>161h:21m:59s</span>
        </div>
        <p class="round-time">每周六 08:00 AM(UTC+8) 更新</p>
      </div>
      <div class="overview">
        <div class="overall">
          <div class="o-card">
            <p class="key">总量</p>
            <p class="value">200,000,000</p>
          </div>
          <div class="o-card">
            <p class="key">挖矿产出</p>
            <p class="value">1,041,659</p>
          </div>
          <div class="o-card">
            <p class="key">持有者</p>
            <p class="value">15,249</p>
          </div>
          <div class="o-card">
            <p class="key">总量</p>
            <p class="value white">200,000,000</p>
          </div>
          <div class="o-card">
            <p class="key">交易笔数</p>
            <p class="value white">4,168</p>
          </div>
          <div class="o-card">
            <p class="key">用户量</p>
            <p class="value white">1,718</p>
          </div>
        </div>
        <div class="divide-title">我的数据</div>
        <div class="mine">
          <div class="o-card">
            <div style="display:none;">
              <p class="key">LON 余额</p>
              <p class="tip">连接钱包后查看</p>
            </div>
            <div>
                <p class="key">
                    <ul class="row">
                        <li>LON 余额</li>
                        <li>手续费率</li>
                    </ul>
                </p>
                <p class="tip">
                    <ul class="row">
                        <li>0</li>
                        <li>0.3%</li>
                    </ul>
                </p>
            </div>
          </div>
          <div class="o-card cz-count">
            <div>
                <p class="key">
                    <ul class="row">
                        <li>本周算力</li>
                        <li>算力份额</li>
                    </ul>
                </p>
                <p class="tip">
                    <ul class="row">
                        <li>0</li>
                        <li>0%</li>
                    </ul>
                </p>
            </div>
          </div>
          <div class="o-card income">
            <div>
                <p class="tip">
                    <ul class="row">
                        <li>奖励记录</li>
                    </ul>
                </p>
            </div>
          </div>
        </div>
      </div>
    </div>

    <!-- 邀请 -->
    <div class="share-wrap">
      <div class="share">
        <div class="pill-link">了解挖矿规则</div>
        <div class="row">
          <div class="row share-title">
            <img src="./../../static/images/gift.svg" alt="" />
            <p>邀请好友，共享 +20% 返佣奖励</p>
          </div>
          <div class="button-group">
            <p @click="toActivate">接受邀请</p>
            <p>邀请好友</p>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import czHeader from "./../components/header";
export default {
  name: "Wallet",
  components: {
    czHeader,
  },
  data() {
    return {};
  },
  methods: {
    toActivate() {
      this.$router.push("/activate");
    },
  },
};
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
.logo-wrap .name-wrap .subtitle,
.logo-wrap .name-wrap .divider {
  font-size: 15px;
  line-height: 20px;
  color: #9aa3ae;
}

/* 邀请 */
.share-wrap {
  background: #373756;
}
.lon-wrap .share-wrap .share {
  padding: 13px 10px 16px 10px;
  width: 1100px;
  display: flex;
  flex-flow: row nowrap;
  align-items: center;
  justify-content: space-between;
  margin: 0 auto;
}
.lon-wrap .share-wrap .share .pill-link {
  display: inline-block;
  line-height: 35px;
  border: 0.5px solid #fff;
  border-radius: 18px;
  width: 135px;
  text-align: center;
  font-size: 15px;
  color: white;
  text-decoration: none;
}
.lon-wrap .row {
  display: flex;
  flex-flow: row nowrap;
  align-items: center;
}
.lon-wrap .share-wrap .share .share-title {
  margin-right: 10px;
}
.lon-wrap .share-wrap .share .share-title p {
  font-size: 11px;
  line-height: 15px;
  color: #ffffff;
  margin-left: 5px;
}
.lon-wrap .share-wrap .share .button-group {
  display: flex;
  flex-flow: row nowrap;
  align-items: center;
  justify-content: space-around;
}
.lon-wrap .share-wrap .share .button-group p {
  color: white;
  background: #5f4dbc;
  border: 0.5px solid #5f55a9;
  border-radius: 18px;
  outline: none;
  line-height: 36px;
  height: 36px;
  flex: 1;
  margin: 0 5px;
  text-align: center;
  text-decoration: none;
  font-size: 15px;
  width: 120px;
  text-align: center;
  cursor: pointer;
}

/* 主页 */
.lon-dashboard {
  width: 1145px;
  min-width: 1145px;
  margin: 0 auto;
  position: relative;
  padding: 70px 0 120px;
}
.lon-dashboard .logo-wrap {
  display: flex;
  flex-flow: column nowrap;
  align-items: center;
  color: white;
  padding: 15px;
}
.logo-wrap > div:first-child {
  background: white;
  width: 56px;
  height: 56px;
  border-radius: 50%;
  padding: 8px;
  box-sizing: border-box;
}
.logo-wrap > div:first-child img {
  width: 40px;
  height: 40px;
}
.logo-wrap .name-wrap {
  margin-top: 10px;
}
.logo-wrap .name-wrap .title {
  font-weight: 800;
  font-size: 17px;
  line-height: 20px;
  color: #ffffff;
}
.logo-wrap .name-wrap .divider {
  margin: 0 5px;
}
.logo-wrap .clock {
  height: 28px;
  padding: 0 8px;
  margin-top: 15px;
  display: flex;
  flex-flow: row nowrap;
  align-items: center;
  justify-content: space-around;
  border: 0.5px solid rgba(255, 255, 255, 0.2);
  border-radius: 14px;
}
.logo-wrap .clock span {
  font-size: 15px;
  line-height: 22px;
  color: rgba(255, 255, 255, 0.7);
  letter-spacing: 1px;
  margin-left: 8px;
}
.logo-wrap .round-time {
  font-size: 11px;
  line-height: 16px;
  color: #9598ab;
  margin-top: 8px;
}
/* 列表 */
.overview .overall {
  display: flex;
  flex-flow: row wrap;
  align-items: center;
  justify-content: flex-start;
  padding-left: 10px;
}
.divide-title {
  font-size: 16px;
  line-height: 24px;
  text-align: center;
  color: #9aa3ae;
  margin: 30px;
  display: flex;
  flex-flow: row nowrap;
  align-items: center;
  justify-content: center;
}
.overview .mine {
  display: flex;
  flex-flow: row wrap;
  align-items: center;
  justify-content: flex-start;
  padding-left: 10px;
}

.overview .overall .o-card {
  width: 355px;
  height: 120px;
  background: #2c2c4d;
  border: 0.5px solid #373756;
  box-sizing: border-box;
  box-shadow: 0px 4px 20px rgba(57, 53, 92, 0.3);
  border-radius: 12px;
  margin: 10px;
  padding: 25px 24px 28px;
}
.overview .overall .o-card .key {
  font-size: 14px;
  line-height: 20px;
  color: rgba(255, 255, 255, 0.5);
}
.overview .overall .o-card .value {
  font-size: 27px;
  line-height: 27px;
  color: #f0bf70;
  margin-top: 10px;
  font-weight: 700;
  letter-spacing: 2px;
}
.overview .overall .o-card .value.white {
  color: white;
}
.overview .mine .o-card {
  width: 355px;
  height: 120px;
  background: #f0bf70;
  border: 0.5px solid #373756;
  box-sizing: border-box;
  box-shadow: 0px 4px 20px rgba(57, 53, 92, 0.3);
  border-radius: 12px;
  margin: 10px;
  padding: 20px 24px 30px;
  display: flex;
  flex-flow: row nowrap;
  align-items: center;
  justify-content: space-between;
}
.overview .mine .o-card.cz-count{
    background: #b6444e;
}
.overview .mine .o-card.income{
    background: #0a0a81;
}
.overview .mine .o-card .key {
  font-size: 12px;
  line-height: 17px;
  color: rgba(255, 255, 255, 0.7);
}
.overview .mine .o-card>div {
    width: 100%;
}
.overview .mine .o-card .key ul,.overview .mine .o-card .tip ul {
    display: flex;
    justify-content: space-between;
    color: rgba(255, 255, 255, 0.7);
}
.overview .mine .o-card .tip {
  font-size: 27px;
  line-height: 27px;
  color: rgba(255, 255, 255, 0.2);
  margin-top: 10px;
  cursor: pointer;
}

@media screen and (max-width: 960px) {
  .lon-wrap .exchange-header-wrap {
    display: none;
  }
  .lon-wrap .lon-dashboard {
    min-width: unset;
    padding: 30px 9px 120px 11px;
    -webkit-overflow-scrolling: touch;
    width: 100%;
    box-sizing: border-box;
  }
  .lon-wrap .share-wrap {
    position: fixed;
    left: 0;
    bottom: 0;
    width: 100%;
    background: #373756;
    box-sizing: border-box;
  }
  .lon-wrap .share-wrap .share {
    width: unset;
  }
  .lon-wrap .share-wrap .share .pill-link {
    display: none;
  }
  .lon-wrap .share-wrap .share > .row {
    width: 100%;
    flex-flow: column nowrap;
  }
  .lon-wrap .share-wrap .share > .row .share-title {
    padding-bottom: 10px;
  }
  .lon-wrap .share-wrap .share .button-group {
    width: 100%;
  }
}
</style>
